repeat(auto-fit, minmax(<rem>, 1fr))

以下のような指定がどういう意味か？

grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));

auto-fitの代わりにauto-fillを使うこともある

が、fitの方が気がするmrsekut.icon

ボトムアップに見るよりも、トップダウンに見たほうがわかりやすい

構成要素

どういう順序で理解すれば良さそうか

ボトムアップに構成要素を1つずつ抑えていくのも大事ではある

しかし、「これらはセットで使うもの」という前提があるので、それを先に知っておくとスムーズmrsekut.icon

fr (単位)は、gridと一緒に使われる単位

余った余白をどう振り分けるか、という指定になる

minmax()は、2つの引数を取って、その間の値になるように計算される

minmax(10rem, 1fr)と書くことで、

最小値は、10rem

最大値は、余白分を全部埋めるように拡大

という意味になる

repeat()とauto-fitはセットで使うものである

repeat()というpropertyに規定されている値の一つがauto-fit

auto-fitと似ているものに、auto-fillがある

なので、この差異とかは最後に確認すれば良い

repeat()やauto-fitと、minmax(値, fr)を使うことで良い感じになる

minmax()は使わなくても意味論としては正しいが、無意味なのでやることない

ボトムアップに見ていくには良さそうな解説

repeat(auto-fill, minmax(min(100%, 250px), 1fr));と書くこともある

minmaxの中でmin()を使っている

画面幅が小さい時にscrollbarが表示するのを避けられる

Tailwindにはまだそれを簡潔に書けるclassが用意されていないので議論中

e.g. grid-rows-fill-16

code:tsx

</ul>